<template>
    <div class="formcontainer">
        <el-form :model="batchForm" ref="batchForm" class="formcontainer" :label-width="batchFormLabelWidth"
            v-loading="loading">
            <el-form-item :label-width="batchFormLabelWidth">
                <span slot="label">
                    <el-checkbox v-model="batchForm.isDoorCheckAlarm.isEnable">
                        <span>门检异常是否报警</span>
                    </el-checkbox>
                </span>
                <el-checkbox v-model="batchForm.isDoorCheckAlarm.value"
                    :disabled="SetDisabled(batchForm.isDoorCheckAlarm.isEnable)" />
            </el-form-item>

            <el-form-item :label-width="batchFormLabelWidth">
                <span slot="label">
                    <el-checkbox v-model="batchForm.isTamperAlarm.isEnable">
                        <span>防拆异常是否报警</span>
                    </el-checkbox>
                </span>
                <el-checkbox v-model="batchForm.isTamperAlarm.value"
                    :disabled="SetDisabled(batchForm.isTamperAlarm.isEnable)" />
            </el-form-item>

            <el-form-item :label-width="batchFormLabelWidth">
                <span slot="label">
                    <el-checkbox v-model="batchForm.isFaceDetect.isEnable">
                        <span>是否启用人脸识别</span>
                    </el-checkbox>
                </span>
                <el-checkbox v-model="batchForm.isFaceDetect.value"
                    :disabled="SetDisabled(batchForm.isFaceDetect.isEnable)" />
            </el-form-item>

            <el-form-item :label-width="batchFormLabelWidth">
                <span slot="label">
                    <el-checkbox v-model="batchForm.isQRcode.isEnable">
                        <span>是否启用二维码开锁</span>
                    </el-checkbox>
                </span>
                <el-checkbox v-model="batchForm.isQRcode.value" :disabled="SetDisabled(batchForm.isQRcode.isEnable)" />
            </el-form-item>

            <el-form-item :label-width="batchFormLabelWidth">
                <span slot="label">
                    <el-checkbox v-model="batchForm.isNeedPwd.isEnable">
                        <span>是否密码开锁</span>
                    </el-checkbox>
                </span>
                <el-checkbox v-model="batchForm.isNeedPwd.value"
                    :disabled="SetDisabled(batchForm.isNeedPwd.isEnable)" />
            </el-form-item>

            <el-form-item :label-width="batchFormLabelWidth">
                <span slot="label">
                    <el-checkbox v-model="batchForm.calibrateTime.isEnable">
                        <span>自动校准时间</span>
                    </el-checkbox>
                </span>
                <el-checkbox v-model="batchForm.calibrateTime.value"
                    :disabled="SetDisabled(batchForm.calibrateTime.isEnable)" />
            </el-form-item>

            <el-form-item :label-width="batchFormLabelWidth">
                <span slot="label">
                    <el-checkbox v-model="batchForm.openByIdCard.isEnable">
                        <span>允许刷任何卡开锁</span>
                    </el-checkbox>
                </span>
                <el-checkbox v-model="batchForm.openByIdCard.value"
                    :disabled="SetDisabled(batchForm.openByIdCard.isEnable)" />
            </el-form-item>

            <el-form-item :label-width="batchFormLabelWidth">
                <span slot="label">
                    <el-checkbox v-model="batchForm.openByBluetooth.isEnable">
                        <span>蓝牙开锁</span>
                    </el-checkbox>
                </span>
                <el-checkbox v-model="batchForm.openByBluetooth.value"
                    :disabled="SetDisabled(batchForm.openByBluetooth.isEnable)" />
            </el-form-item>

            <el-form-item :label-width="batchFormLabelWidth">
                <span slot="label">
                    <el-checkbox v-model="batchForm.isNightDormant.isEnable">
                        <span>是否开启休眠</span>
                    </el-checkbox>
                </span>
                <el-checkbox v-model="batchForm.isNightDormant.value"
                    :disabled="SetDisabled(batchForm.isNightDormant.isEnable)" />
            </el-form-item>

            <el-form-item :label-width="batchFormLabelWidth">
                <span slot="label">
                    <el-checkbox v-model="batchForm.isBioAssay.isEnable">
                        <span>开启活体检测</span>
                    </el-checkbox>
                </span>
                <el-checkbox v-model="batchForm.isBioAssay.value"
                    :disabled="SetDisabled(batchForm.isBioAssay.isEnable)" />
            </el-form-item>

            <el-form-item :label-width="batchFormLabelWidth">
                <span slot="label">
                    <el-checkbox v-model="batchForm.open_By_IdCard.isEnable">
                        <span>是否IC卡开锁</span>
                    </el-checkbox>
                </span>
                <el-checkbox v-model="batchForm.open_By_IdCard.value"
                    :disabled="SetDisabled(batchForm.open_By_IdCard.isEnable)" />
            </el-form-item>

            <el-form-item :label-width="batchFormLabelWidth">
                <span slot="label">
                    <el-checkbox v-model="batchForm.cameraAngle.isEnable">
                        <span>摄像头旋转角度</span>
                    </el-checkbox>
                </span>
                <el-select v-model="batchForm.cameraAngle.value" placeholder="请选择"
                    :disabled="SetDisabled(batchForm.cameraAngle.isEnable)">
                    <el-option v-for="item in cameraAngleType" :key="item.value" :label="item.text"
                        :value="item.value" />
                </el-select>
            </el-form-item>

            <el-form-item :label-width="batchFormLabelWidth">
                <span slot="label">
                    <el-checkbox v-model="batchForm.bell.isEnable">
                        <span>铃声音量</span>
                    </el-checkbox>
                </span>
                <el-select v-model="batchForm.bell.value" :disabled="SetDisabled(batchForm.bell.isEnable)"
                    placeholder="请选择铃声音量">
                    <el-option v-for="item in GetOptions(0,7)" :key="item" :label="item" :value="item" />
                </el-select>
            </el-form-item>

            <el-form-item :label-width="batchFormLabelWidth">
                <span slot="label">
                    <el-checkbox v-model="batchForm.mediaDay.isEnable">
                        <span>白天媒体音量</span>
                    </el-checkbox>
                </span>
                <el-select v-model="batchForm.mediaDay.value" :disabled="SetDisabled(batchForm.mediaDay.isEnable)"
                    placeholder="请选白天媒体音量">
                    <el-option v-for="item in GetOptions(0,15)" :key="item" :label="item" :value="item" />
                </el-select>
            </el-form-item>

            <el-form-item :label-width="batchFormLabelWidth">
                <span slot="label">
                    <el-checkbox v-model="batchForm.mediaNight.isEnable">
                        <span>夜间媒体音量</span>
                    </el-checkbox>
                </span>
                <el-select v-model="batchForm.mediaNight.value" :disabled="SetDisabled(batchForm.mediaNight.isEnable)"
                    placeholder="请选择夜间媒体音量">
                    <el-option v-for="item in GetOptions(0,15)" :key="item" :label="item" :value="item" />
                </el-select>
            </el-form-item>

            <el-form-item :label-width="batchFormLabelWidth">
                <span slot="label">
                    <el-checkbox v-model="batchForm.value1.isEnable">
                        <span>夜间开始时间</span>
                    </el-checkbox>
                </span>
                <el-time-picker v-model="batchForm.value1.value" arrow-control placeholder="任意时间点"
                    :disabled="SetDisabled(batchForm.value1.isEnable)" />
            </el-form-item>

            <el-form-item :label-width="batchFormLabelWidth">
                <span slot="label">
                    <el-checkbox v-model="batchForm.value2.isEnable">
                        <span>夜间结束时间</span>
                    </el-checkbox>
                </span>
                <el-time-picker v-model="batchForm.value2.value" arrow-control placeholder="任意时间点"
                    :disabled="SetDisabled(batchForm.value2.isEnable)" />
            </el-form-item>

            <el-form-item :label-width="batchFormLabelWidth">
                <span slot="label">
                    <el-checkbox v-model="batchForm.text1.isEnable">
                        <span>补光灯开始时间</span>
                    </el-checkbox>
                </span>
                <el-time-picker v-model="batchForm.text1.value" arrow-control placeholder="任意时间点"
                    :disabled="SetDisabled(batchForm.text1.isEnable)" />
            </el-form-item>

            <el-form-item :label-width="batchFormLabelWidth">
                <span slot="label">
                    <el-checkbox v-model="batchForm.text2.isEnable">
                        <span>补光灯结束时间</span>
                    </el-checkbox>
                </span>
                <el-time-picker v-model="batchForm.text2.value" arrow-control placeholder="任意时间点"
                    :disabled="SetDisabled(batchForm.text2.isEnable)" />
            </el-form-item>

            <el-form-item :label-width="batchFormLabelWidth">
                <span slot="label">
                    <el-checkbox v-model="batchForm.volume.isEnable">
                        <span>通话音量</span>
                    </el-checkbox>
                </span>
                <el-select v-model="batchForm.volume.value" :disabled="SetDisabled(batchForm.volume.isEnable)"
                    placeholder="请选择通话音量">
                    <el-option v-for="item in GetOptions(0,5)" :key="item" :label="item" :value="item" />
                </el-select>
            </el-form-item>

            <el-form-item :label-width="batchFormLabelWidth">
                <span slot="label">
                    <el-checkbox v-model="batchForm.imageInterval.isEnable">
                        <span>图片轮播间隔</span>
                    </el-checkbox>
                </span>
                <el-input v-model="batchForm.imageInterval.value" style="width: 200px; margin-right: 5px"
                    :disabled="SetDisabled(batchForm.imageInterval.isEnable)" />
                <span>秒</span>
            </el-form-item>

            <el-form-item :label-width="batchFormLabelWidth">
                <span slot="label">
                    <el-checkbox v-model="batchForm.callPriority.isEnable">
                        <span>呼叫优先级</span>
                    </el-checkbox>
                </span>
                <el-select v-model="batchForm.callPriority.value"
                    :disabled="SetDisabled(batchForm.callPriority.isEnable)" placeholder="请选择呼叫优先级">
                    <el-option v-for="item in callPriorityType" :key="item.value" :label="item.text"
                        :value="item.value" />
                </el-select>
            </el-form-item>

            <el-form-item :label-width="batchFormLabelWidth">
                <span slot="label">
                    <el-checkbox v-model="batchForm.startTime.isEnable">
                        <span>自动重启时间</span>
                    </el-checkbox>
                </span>
                <el-select v-model="batchForm.startTime.value" :disabled="SetDisabled(batchForm.startTime.isEnable)"
                    placeholder="请选择自动重启时间">
                    <el-option v-for="item in getStartTimeOptions()" :key="item.value" :label="item.text"
                        :value="item.value" />
                </el-select>
            </el-form-item>

            <el-form-item :label-width="batchFormLabelWidth" prop="alarmTimeDelay">
                <span slot="label">
                    <el-checkbox v-model="batchForm.alarmTimeDelay.isEnable">
                        <span>关门报警延时</span>
                    </el-checkbox>
                </span>
                <el-input v-model="batchForm.alarmTimeDelay.value" style="width: 200px; margin-right: 5px"
                    :disabled="SetDisabled(batchForm.alarmTimeDelay.isEnable)" />
                <span>秒</span>
            </el-form-item>

            <el-form-item :label-width="batchFormLabelWidth">
                <span slot="label">
                    <el-checkbox v-model="batchForm.adplatform.isEnable">
                        <span>广告平台</span>
                    </el-checkbox>
                </span>
                <el-select v-model="batchForm.adplatform.value" :disabled="SetDisabled(batchForm.adplatform.isEnable)"
                    placeholder="请选择广告平台">
                    <el-option v-for="item in adplatformType" :key="item.value" :label="item.text"
                        :value="item.value" />
                </el-select>
            </el-form-item>

            <el-form-item :label-width="batchFormLabelWidth">
                <span slot="label">
                    <el-checkbox v-model="batchForm.systemPwd.isEnable">
                        <span>系统配置密码</span>
                    </el-checkbox>
                </span>
                <el-input v-model="batchForm.systemPwd.value" maxlength="6"
                    :disabled="SetDisabled(batchForm.systemPwd.isEnable)" />
            </el-form-item>

            <el-form-item :label-width="batchFormLabelWidth">
                <span slot="label">
                    <el-checkbox v-model="batchForm.sharePwd.isEnable">
                        <span>公共开锁密码</span>
                    </el-checkbox>
                </span>
                <el-input v-model="batchForm.sharePwd.value" maxlength="6"
                    :disabled="SetDisabled(batchForm.sharePwd.isEnable)" />
            </el-form-item>

            <el-form-item :label-width="batchFormLabelWidth">
                <span slot="label">
                    <el-checkbox v-model="batchForm.rtsp.isEnable">
                        <span>RTSP地址</span>
                    </el-checkbox>
                </span>
                <el-input v-model="batchForm.rtsp.value" :disabled="SetDisabled(batchForm.rtsp.isEnable)" />
            </el-form-item>

            <el-form-item>
                <el-button @click="parentCallBack">取消</el-button>
                <el-button type="primary" @click="batchForm_submit">确定提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import api from '../api/tokenApi.js'
export default {
    name: "BatchUpdateComponents",
    props: ["childData"],
    data() {
        return {
            batchFormLabelWidth: "200px",
            role: 'admin',
            loading: false,
            batchForm: {
                isDoorCheckAlarm: {
                    isEnable: false,
                    value: false
                },
                isTamperAlarm: {
                    isEnable: false,
                    value: false
                },
                isFaceDetect: {
                    isEnable: false,
                    value: false
                },
                isQRcode: {
                    isEnable: false,
                    value: true
                },
                isNeedPwd: {
                    isEnable: false,
                    value: false
                },
                calibrateTime: {
                    isEnable: false,
                    value: true
                },
                openByIdCard: {
                    isEnable: false,
                    value: true
                },
                openByBluetooth: {
                    isEnable: false,
                    value: false
                },
                isNightDormant: {
                    isEnable: false,
                    value: false
                },
                isBioAssay: {
                    isEnable: false,
                    value: false
                },
                open_By_IdCard: {
                    isEnable: false,
                    value: false
                },
                cameraAngle: {
                    isEnable: false,
                    value: "-1"
                },
                bell: {
                    isEnable: false,
                    value: 5
                },
                mediaDay: {
                    isEnable: false,
                    value: 11
                },
                mediaNight: {
                    isEnable: false,
                    value: 0
                },
                value1: {
                    isEnable: false,
                    value: new Date(2019, 9, 10, 0, 0)
                },
                value2: {
                    isEnable: false,
                    value: new Date(2019, 9, 10, 0, 0)
                },
                text1: {
                    isEnable: false,
                    value: new Date(2019, 9, 10, 17, 0)
                },
                text2: {
                    isEnable: false,
                    value: new Date(2019, 9, 10, 8, 0)
                },
                volume: {
                    isEnable: false,
                    value: 4
                },
                callPriority: {
                    isEnable: false,
                    value: "0"
                },
                imageInterval: {
                    isEnable: false,
                    value: 5
                },
                startTime: {
                    isEnable: false,
                    value: -1
                },
                alarmTimeDelay: {
                    isEnable: false,
                    value: 120
                },
                adplatform: {
                    isEnable: false,
                    value: 0
                },
                systemPwd: {
                    isEnable: false,
                    value: 159357
                },
                sharePwd: {
                    isEnable: false,
                    value: null
                },
                rtsp: {
                    isEnable: false,
                    value: null
                }
            },
            callPriorityType: [
                {
                    value: "0",
                    text: "先APP再电话"
                },
                {
                    value: "1",
                    text: "先电话再APP"
                },
                {
                    value: "2",
                    text: "仅APP"
                },
                {
                    value: "3",
                    text: "仅电话"
                },
            ],
            cameraAngleType: [
                {
                    value: "-1",
                    text: "不启用",
                },
                {
                    value: "0",
                    text: "0",
                },
                {
                    value: "90",
                    text: "90",
                },
                {
                    value: "180",
                    text: "180",
                },
                {
                    value: "270",
                    text: "270",
                },
            ],
            adplatformType: [
                {
                    value: 0,
                    text: "U家平台",
                },
                {
                    value: 1,
                    text: "新媒体平台",
                },
                {
                    value: 2,
                    text: "第三平台",
                },
            ],
            form: {
            },
            rules: {
                alarmTimeDelay: [
                    {
                        required: true,
                        message: "关门报警延时（默认120）",
                    },
                ]
            }
        }
    },
    methods: {
        parentCallBack(msg) {
            msg = "回调";
            this.$refs.batchForm.resetFields();
            this.$emit("parentCallBack", msg);
        },
        //设置表单是否禁用
        SetDisabled(isEnable) {
            return isEnable == false;
        },
        //循环下拉选项
        GetOptions(start, end) {
            let options = [];
            for (var i = start; i < end; i++) {
                options.push(i);
            }
            return options;
        },
        getStartTimeOptions() {
            let arr = [];
            for (let i = 0; i < 24; i++) {
                arr.push({
                    text: i + "点",
                    value: i,
                });
            }
            arr.unshift({ text: "不重启", value: -1 });
            return arr;
        },
        batchForm_submit() {
            this.loading = true;
            const ids = [1, 2, 3, 4, 5, 6];
            var formData = this.getFormData();
            ids.forEach(item => {
                formData.append("id", item);
            });
            api.doformData(formData).then(res => {
                console.log(res);
                this.loading = false;
            }).catch(() => {
                this.loading = false;
            })
        },
        getFormData() {
            const formData = new FormData()
            Object.keys(this.batchForm).forEach(key => {
                const item = this.batchForm[key]
                console.log("item:", key)
                console.log(item.value)
                console.log(item.isEnable)
                if (item.isEnable == true) {
                    formData.append(key, item.value)
                }
            })
            return formData
        }
    }
}
</script>
<style>
.formcontainer {
    padding: 0px 20px;
}
</style>